<template>
	<view>
		<view class="od_top">
			<view class="od_top_first">
				<image src="http://cdn.hntgov.net/online/static/ps_ps.png"></image>支付成功
			</view>
			<text class="od_top_text1">卡号会在10分钟左右以短信的形式发放</text>
		</view>
		<view style="background-color: #fff;">
			<view class="od_sh">
				<image style="width: 32rpx;height: 28rpx;" src="http://cdn.hntgov.net/online/static/pas_ps.png">
				</image>
				<view class="od_sh_right">
					<text style="color: #696969;" 支付方式：<text style="color: #3D3D3D;">支付宝支付</text></text>
					<text style="color: #696969;padding-top: 16rpx;">实付金额：<text
							style="color: #3D3D3D;">￥{{obj.data.totalAmount||0}}</text></text>
				</view>
			</view>
			
			<view class="od_line"></view>
			<view class="ps_item">
				<view class="ps_item_item" style="color: #181617;" @tap='seeOrder()'>查看订单</view>
				<view style="width: 1rpx;height: 48rpx;background-color: #E7E6E6;"></view>
				<view class="ps_item_item" style="color: #ED2D38;" @tap='toMall()'>继续逛逛</view>
			</view>

		</view>
		<view style="margin-top: 20rpx;background-color: #fff;padding-top: 40rpx;">
			<u-divider>为你推荐以下商品</u-divider>
			<view class="new_five">
				<view v-for="(item,index) in testList" :key='index' class="new_five_view" @tap='toGoods(item.goods.id)'>
					<view class="new_five_img_container">
						<image :src="item.goodsInfo.propagatePic.length>0?item.goodsInfo.propagatePic[0]:'https://aliyunoss.hntgov.net/sd/all_moren.png'"  mode="aspectFill"></image>
						<!-- <text>最热</text> -->
					</view>
					<text class="new_five_title">{{item.modelName||''}}</text>
					<text style="font-size: 24rpx;color: #989898;margin-left: 14rpx;">已售{{item.salesNum||0}}件</text>
					<view
						style="width: 335rpx;position: relative;margin-top: 12rpx;display: flex;align-items: center;margin-left: 14rpx;">
						<text style="font-size: 30rpx;color: #ED2D38;">￥{{(item.skuList[0].buyPrice/100).toFixed(2)}}</text>
						<view class="li_buy">立即购买</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				testList: 4,
				orderId: '',
				obj: {},
				flag: false,
				isCy: false,
				times:3,
				timer:null
			}
		},
		onLoad(e) {
			that = this
			that.orderId =e.orderId
			that.getOrderDetail()
			that.getRecommendProduct()
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			getCounponPerson() {
               uni.reLaunch({
               	url:'/member/vip/lottery'
               })
			},

			seeOrder() {
				uni.reLaunch({
					url: 'orderlist?index=0'
				})
			},
			toGoods(e) {
				uni.reLaunch({
					url: '/pages/goods/goods?goodsId=' + e
				})
			},
			toMall() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			getOrderDetail() {
				that.$u.api.getQueryOrderUrl({
					orderNo:this.orderId,
				}).then(res => {
					if (res) {
						this.obj=res.data
					}
				})
			},
			startTime(){
				this.timer=setInterval(()=>{
					if(this.times<=0){
						clearInterval(this.timer)
						that.getCounponPerson()
						this.timer=null
						return
					}
					this.times--
				},1000)
			},
			
			getRecommendProduct() {
				that.$u.api.getRecommendProductUrl().then(res => {
					if (res) {
						res.data.forEach(item=>{
							if (item.goodsInfo.propagatePic!=null) {
								item.goodsInfo.propagatePic = item.goodsInfo.propagatePic.split(',')
							}
						})
						
						this.testList=res.data
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.li_buy{
		width: 136rpx;
		height: 56rpx;
		color: #fff;
		background: linear-gradient(90deg, #FF4C42 0%, #FF9469 100%);
		border-radius: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		position: absolute;
		right: 20rpx;
	}
	.get_coupon {
		color: #fff;
		background-color: #ED2D38;
		width: 250rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.new_five_img_container {
		width: 335rpx;
		height: 335rpx;
		position: relative;
	}

	.new_five_img_container image {
		width: 335rpx;
		height: 335rpx;
		border-radius: 12rpx;
	}

	.new_five{
		width: 718rpx;
		background: linear-gradient(180deg, #E3F0FC 0%, #98CDFF 100%);
		padding-bottom: 30rpx;
		border-radius: 30rpx;
		margin-left: 16rpx;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		.new_five_view{
			width: 333rpx;
			// height: 335rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding-bottom: 30rpx;
			margin: 24rpx 12rpx 0rpx 13rpx;
		}
	}

	.new_five_img_container text {
		padding: 5rpx 10rpx 5rpx 10rpx;
		color: #FFFFFF;
		background-color: #ED2D38;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		border-radius: 12rpx 0rpx 12rpx 0rpx;
		font-size: 20rpx;
	}

	.new_five_title {
		width: 288rpx;
		margin-left: 14rpx;
		color: #181617;
		font-size: 26rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
		margin-top: 16rpx;
		margin-bottom: 10rpx;
	}

	.ps_item {
		width: 690rpx;
		margin-left: 30rpx;
		height: 96rpx;
		align-items: center;

		display: flex;

		.ps_item_item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.od_top {
		width: 750rpx;
		height: 210rpx;
		background: linear-gradient(90deg, #FF3F3C -8%, #FFA371 107%);
		padding-top: 56rpx;
		padding-left: 70rpx;
		display: flex;
		flex-direction: column;
	}

	.od_top_first {
		display: flex;
		align-items: center;

		color: #FFF;
		font-size: 34rpx;

	}

	.od_top_first image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.od_top_text1 {
		padding-top: 16rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.od_sh {
		padding: 30rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		background-color: #fff;

		.od_sh_right {
			width: 640rpx;
			margin-left: 18rpx;
			display: flex;
			flex-direction: column;
		}
	}

	.od_line {
		width: 690rpx;
		height: 1rpx;
		background-color: #E7E6E6;
		margin-left: 30rpx;
	}
</style>